window.addEventListener('load', function() {
  var log = console.log || window.console.log;
  var $ = document.querySelector.bind(document);

  /**
   * 注：该动画仅供特殊项目要求的进度条轮播所用
   * 用前要把'px'换成'rem' !!!
   * obj是绝对定位的ul的dom
   * roll_len是一次滚动的rem长度，一般滚动条显示宽度为10rem
   * 实际调用是 animation($('ul'), 10);
   */

  animation($('ul'), 158);
  
  function animation(obj, roll_len) {
    var times = 0
    var _cl = obj.children.length -1
    function animate(start, end, cb) {
      var step = (end - start) / 10
      var n = 1
      clearInterval(timer)
      function move() {
        obj.style.left = start + step * n + 'px'
        if(obj.style.left === end + 'px') {
          clearInterval(timer)
          cb && cb()
        }
        n++
      }
      var timer = setInterval(move, 30)
    }
    var timerUl = setInterval(function() {
      if(parseFloat(obj.style.left) <= (- _cl * roll_len)) {
        obj.style.left = 0
        times = 1
      } else {
        times++
      }
      animate(roll_len - times * roll_len, -times * roll_len)
    }, 1500)
    document.addEventListener('visibilitychange', function() {
      var isHidden = document.hidden;
      if(isHidden) {
        clearInterval(timerUl);
      } else {
        timerUl = setInterval(function() {
          if(parseFloat(obj.style.left) <= (- _cl * roll_len)) {
            obj.style.left = 0
            times = 1
          } else {
            times++
          }
          animate(roll_len - times * roll_len, -times * roll_len)
        }, 1500)
      }
    })
  }

  
})